<template>
  <div>
    <div class="content" v-if="mypublish.length > 0">
      <div class="myPublish layout" v-if="cut === 1">
        <h3>我的发布:</h3>
        <Works :worksData="mypublish"></Works>
      </div>
      <div class="mylove layout" v-else-if="cut === 2">
        <h3>我的喜欢:</h3>
        <Works :worksData="mypublish"></Works>
      </div>
    </div>
    <div v-else class="blank">
      <router-link to="/publish" v-if="cut === 1">你还没有发布，点击去发布属于你的墙吧</router-link>
      <router-link to="/home" v-else-if="cut === 2">你还没有喜欢的墙，点击去添加你的墙吧</router-link>
    </div>
  </div>
</template>

<script>
import Works from "@/views/works/index.vue";
// 引入封装计算滚动距离函数
import { getRollLength } from "@/schema/getRollLength";
export default {
  props: ["cut"],
  data() {
    return {
      // 我的发布数据
      mypublish: [],
      num: 0, //获取数据的开始值
      isWait: true, //控制是否需要等待请求
    };
  },
  components: {
    Works,
  },
  created() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //页面离开后销毁监听事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  mounted() {
    // 获取不同cut相应的数据
    this.getmoundleData();
  },
  methods: {
    // 获取不同cut相应的数据回调
    getmoundleData() {
      // 重置数据
      this.num = 0;
      this.mypublish = [];
      if (this.cut === 1) {
        // 获取我的发布信息
        // 判断阅读者和使用者
        if (this.$route.params.isMine) {
          this.getMypublish();
        } else {
          this.visitmypublish();
        }
      } else if (this.cut === 2) {
        //获取我的喜欢信息
        if (this.$route.params.isMine) {
          this.getMycollect();
        } else {
          this.visitmycollect();
        }
      }
    },
    // 获取我的发布信息回调
    async getMypublish() {
      let result = await this.$API.mypublish(this.num);
      this.handleResult(result);
    },
    //获取我的喜欢信息回调
    async getMycollect() {
      let result = await this.$API.mycollect(this.num);
      this.handleResult(result);
    },
    // 处理请求返回值的回调
    handleResult(result) {
      this.isWait = true; //让节流复原
      if (result.code === 200) {
        // 因为我们在储存照片墙时通过字符串拼接得到，所以要转化成数组
        result.data.forEach((item) => {
          if (item.pic_walls) {
            item.pic_walls = item.pic_walls.split("___");
          }
          this.mypublish.push(item);
        });
      } else {
        return this.$message(result.message);
      }
    },
    // 滚动事件的回调
    handleScroll() {
      // 去判断是否触底
      let result = getRollLength();
      // 判断返回值是否为true
      if (result) {
        // 判断是否可以发起请求
        if (this.isWait) {
          this.num += 5;
          this.isWait = false;
          // 判断当前的模块，来获取不同数据
          if (this.cut === 1) {
            // 判断是阅读者还是使用者
            if (this.$route.params.isMine) {
              this.getMypublish();
            } else {
              this.visitmypublish();
            }
          } else {
            if (this.$route.params.isMine) {
              this.getMycollect();
            } else {
              this.visitmycollect();
            }
          }
        }
      }
    },
    // 访问我的发布信息回调
    async visitmypublish() {
      let result = await this.$API.visitmypublish(
        this.$route.params.uuId,
        this.num
      );
      this.handleResult(result);
    },
    // 访问我的喜欢回调
    async visitmycollect() {
      let result = await this.$API.visitmycollect(
        this.$route.params.uuId,
        this.num
      );
      this.handleResult(result);
    },
  },
  watch: {
    // 监听cut值的变化获取相应模块的值
    cut() {
      // 获取数据
      this.getmoundleData();
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .layout {
    margin: 10px 0;
    display: flex;
    justify-content: start;
  }
  h3 {
    margin-right: 20px;
    font-weight: 600;
    color: #008c8c;
  }
}
.blank {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  a {
    border-bottom: 1px solid #008cc8;
  }
}
</style>